<template>
  <view>
      <view :class="s.content" :style="{backgroundColor:flowColor,transform:`rotate(${flowRotate}deg)`}">
          <view :class="s.top">
          {{text}}
      </view>
          <view :class="s.text">{{flowColor}}</view>
      </view>
  </view>
</template>

<script lang="ts">
import { computed, defineComponent,reactive,ref } from "vue";

export default defineComponent({
    setup(){
        const text = ref<string>("xxx")
        const colors = reactive<Array<string>>([
            "rgba(255,0,0,0.5)","rgba(255,165,0,0.5)","rgba(255,255,0,0.5)","rgba(0,255,0,0.5)","rgba(0,127,255,0.5)","rgba(0,0,255,0.5)","rgba(139,0,255,0.5)"
        ])
        const abs = computed(()=>Math.random()-0.5>0?-1:1)
        const flowColor = computed(()=>colors[Math.floor(Math.random()*7)])
        const flowRotate = computed(()=>Math.ceil(Math.random()*30)*abs.value)
        return {
            text,
            colors,
            flowColor,
            flowRotate
        }
    }
})
</script>

<style lang="scss" module="s">
 
    .content{
        margin: 48px;
        position: relative;
        box-sizing: border-box;
        width: 280px;
        height: 280px;
        padding: 60px 12Px 12Px;
        word-break: break-all;
        .text{
            font-size: 13Px;
        }
           .top{
               padding-left: 80px;
               width: 100%;
               height: 50px;
               position: absolute;
               left: 0;
               top: -8px;
               line-height: 70px;
               &::after{
                   content: "";
                   position: absolute;
                   width: 50px;
                   height: 50px;
                   left: 8Px;
                   top: 8Px;
                   background-color: #fff;
                   border-radius: 50%;
               }
             }
    }
</style>